<template>
	<view class="read-desk-container">
		<!-- 增强的动态背景装饰 -->
		<view class="dynamic-background">
			<view class="bg-shape shape-1"></view>
			<view class="bg-shape shape-2"></view>
			<view class="bg-shape shape-3"></view>
			<view class="bg-shape shape-4"></view>
			<!-- 添加额外的动态元素 -->
			<view class="bg-dot dot-1"></view>
			<view class="bg-dot dot-2"></view>
			<view class="bg-dot dot-3"></view>
		</view>

		<scroll-view scroll-y="false" class="scroll-Y" style="height:100%;">
			<!-- 增强的动态背景装饰 -->
			<z-paging ref="paging" :auto="true" refresher-only use-page-scroll @onRefresh="onRefresh">
				<!-- 自定义导航栏 -->
				<template #top>
					<!-- 优化后的顶部导航栏 - 解决分层问题 -->
					<view class="header" :style="{height:mainNavHeightValue+'px'}">
						<!-- 合并状态栏和导航栏，解决分层问题 -->
						<view class="nav-content">
							<view class="nav-title">
								<span class="title-text">{{$t('readDesk.todayRead')}}</span>
							</view>
							<view class="read-stats">
								<span class="stats-time">{{timeNum}}</span>
								<span class="stats-unit">{{$t('readDesk.minutes')}}</span>
							</view>
						</view>
					</view>
				</template>
		
				
				<!-- 空状态显示 -->
				<!--  v-if="list.length <= 0"  -->
				<!-- slot="empty"  -->
				<view v-if="list.length <= 0" class="empty-state" >
					<view class="empty-icon">📚</view>
					<view class="empty-text">{{$t('readDesk.noBooks')}}</view>
					<view class="empty-subtext">{{$t('readDesk.addBook')}}</view>
				</view>
					
				<!-- 优化后的书籍列表项 -->
				<view v-else  class="book-item" v-for="(item, index) in list" :key="index" @click="enterBookInfoDetail(item)"
					:class="{ 'book-item-animated': false }" :data-index="index">
					
					<!-- 书籍封面 -->
					<view class="book-cover-wrapper">
						<image class="book-cover" :src="item.bookIconUrl || '/static/default_cover.png'" lazy-load
							mode="aspectFill" @error="onImageError($event, item)"></image>
					</view>
					
					<!-- 阅读进度指示器 -->
					<view class="progress-indicator" style="margin-top: 100px;">
						<view class="progress-bar">
							<view class="progress-fill" :style="{ width: (item.progress || 0) + '%' }"></view>
						</view>
					</view>
					
					<!-- 书籍信息 -->
					<view class="book-info">
						<!-- 标题 -->
						<h3 class="book-title">{{item.bookName}}</h3>
						<!-- 元数据信息 -->
						<view class="book-meta">
							<view>
								<span class="author">{{item.author}}</span>
								<span class="meta-divider">·</span>
								<span class="read-time-info">{{item.progress + '%' || '0%'}}</span>
							</view>
							<!-- 分类标签 - 单独一行 -->
							<span class="book-category">{{item.cateName}}</span>
						</view>
					
						<!-- 简介 -->
						<view class="book-description">
							<p class="description-text">{{item.intro}}</p>
						</view>
					</view>
				
				
				</view>
							
			</z-paging>
		
		</scroll-view>
				
	</view>
</template>

<script>
	import data from "./data.js";
	import methods from "./methods.js";

	export default {
		data() {
			return data.init(this);
		},

		mounted() {

			// 监听阅读时间更新 - 添加错误处理
			try {
				let that = this;
				uni.$on('appRunTime', function(res) {
					that.timeNum = res;
				});
				that.list = [];
				that.onRefresh();
			} catch (error) {
				console.error('Event listener error:', error);
			}


		},

		onShow() {
			console.log(this.list, "----222---")

		},

		onUnmounted() {
			// 移除事件监听
			uni.$off('appRunTime');
		},

		created() {
			this.sysInfoRes = uni.getSystemInfoSync();
			this.stateHeightValue = this.sysInfoRes.statusBarHeight;
			this.mainNavHeightValue = this.navHeightValue + this.stateHeightValue;
		},
		methods: {
			...methods,

			// 刷新回调 - 优化性能
			onRefresh() {
				this.initPageReadDatas();
			},

			// 处理图片加载失败
			onImageError(e, item) {
				try {
					if (e && e.target) {
						e.target.src = '/static/default_cover.png';
					}
				} catch (error) {
					console.error('Image loading error:', error);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	// 全局样式变量
	$primary-color: #d4237a;
	$secondary-color: #5AC8FA;
	$text-primary: #333;
	$text-secondary: #666;
	$text-tertiary: #888;
	$border-color: #e4e7ed;
	$bg-primary: #ffffff;
	$bg-secondary: #f8f9fa;
	$shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
	$shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
	$border-radius: 12px;
	$spacing-xs: 4px;
	$spacing-sm: 8px;
	$spacing-md: 12px;
	$spacing-lg: 16px;
	$spacing-xl: 20px;
	$skeleton-bg: #f0f0f0;
	$skeleton-shine: rgba(255, 255, 255, 0.6);

	.read-desk-container {
		width: 100%;
		height: 100%;
		background-color: $bg-secondary;
		position: relative;
		overflow: hidden;
	}

	/* 优化内容区域滚动，解决滑动冲突 */
	.content-wrapper {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}

	// 增强的动态背景装饰 - 确保动态效果
	.dynamic-background {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		overflow: hidden;
		// 增强背景效果
		background-color: $bg-secondary;
		// 添加背景渐变效果
		background-image:
			radial-gradient(circle at 50% 20%, rgba(0, 122, 255, 0.08), transparent 70%),
			radial-gradient(circle at 80% 60%, rgba(90, 200, 250, 0.05), transparent 60%);
		// 添加背景动画
		animation: subtleBgMove 30s ease-in-out infinite;
	}

	@keyframes subtleBgMove {

		0%,
		100% {
			background-position: 0% 0%, 100% 100%;
		}

		50% {
			background-position: 20% 10%, 80% 90%;
		}
	}

	.bg-shape {
		position: absolute;
		background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), transparent);
		border-radius: 50%;
		animation: float-shape 15s ease-in-out infinite;
		// 增强形状效果
		backdrop-filter: blur(30px);
	}

	// 额外的动态点元素
	.bg-dot {
		position: absolute;
		background: rgba(0, 122, 255, 0.2);
		border-radius: 50%;
		animation: dot-float 8s ease-in-out infinite;
	}

	.dot-1 {
		top: 25%;
		left: 15%;
		width: 10px;
		height: 10px;
		animation-delay: 1s;
	}

	.dot-2 {
		top: 60%;
		right: 25%;
		width: 8px;
		height: 8px;
		animation-delay: 3s;
	}

	.dot-3 {
		bottom: 15%;
		left: 40%;
		width: 6px;
		height: 6px;
		animation-delay: 5s;
	}

	@keyframes dot-float {

		0%,
		100% {
			transform: translateY(0) scale(1);
			opacity: 0.3;
		}

		50% {
			transform: translateY(-20px) scale(1.5);
			opacity: 0.8;
		}
	}

	.shape-1 {
		top: 10%;
		left: -10%;
		width: 40vw;
		height: 40vw;
		animation-delay: 0s;
	}

	.shape-2 {
		top: 50%;
		right: -15%;
		width: 50vw;
		height: 50vw;
		animation-delay: 2s;
		animation-duration: 20s;
	}

	.shape-3 {
		bottom: 10%;
		left: 30%;
		width: 30vw;
		height: 30vw;
		animation-delay: 4s;
		animation-duration: 18s;
	}

	.shape-4 {
		top: 30%;
		right: 20%;
		width: 20vw;
		height: 20vw;
		animation-delay: 6s;
		animation-duration: 16s;
	}

	@keyframes float-shape {

		0%,
		100% {
			transform: translate(0, 0) rotate(0deg);
		}

		25% {
			transform: translate(10px, -10px) rotate(5deg);
		}

		50% {
			transform: translate(0, -20px) rotate(0deg);
		}

		75% {
			transform: translate(-10px, -10px) rotate(-5deg);
		}
	}

	// 简化的顶部导航栏 - 解决分层和内容溢出问题
	.header {
		// position: fixed;
		width: 100%;
		z-index: 1000;
		background: linear-gradient(135deg, $primary-color, $secondary-color);
		overflow: hidden;
		display: flex;
		align-items: center;
		// 移除状态栏占位，直接使用固定高度
		padding-top: 0;
	}

	.nav-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 $spacing-lg; // 减小内边距
		width: 100%;
		height: 100%;
		// 确保内容不溢出
		box-sizing: border-box;
		// 限制最大宽度
		max-width: 100%;
	}

	.nav-title {
		display: flex;
		align-items: center;
		margin-top: 30px;
	}

	.title-text {
		font-size: 16px;
		font-weight: bold;
		color: white;
		letter-spacing: 1px;
		// 优化文字阴影
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	}

	/* 移除装饰图标，减少内容拥挤 */

	@keyframes bounce {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-3px);
		}
	}

	// 简化的阅读统计区域
	.read-stats {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.2);
		padding: $spacing-xs $spacing-md;
		border-radius: 20px;
		// 呼吸动画效果
		animation: breathe 3s ease-in-out infinite;
		margin-top: 30px;
	}

	@keyframes breathe {

		0%,
		100% {
			transform: scale(1);
			background: rgba(255, 255, 255, 0.2);
		}

		50% {
			transform: scale(1.02);
			background: rgba(255, 255, 255, 0.25);
		}
	}

	/* 移除标签，简化显示 */
	.stats-label {
		display: none;
	}

	.stats-time {
		font-size: 16px;
		font-weight: bold;
		color: white;
		margin: 0 4px;
	}

	.stats-unit {
		font-size: 12px;
		color: white;
		margin-left: 4px;
	}

	// 内容区域
	.content-area {

		width: 100%;
		background-color: transparent;
	}

	// 骨架屏样式
	.skeleton-container {
		padding: $spacing-lg;
	}

	.skeleton-item {
		display: flex;
		margin-bottom: $spacing-lg;
		align-items: flex-start;
		padding: $spacing-lg;
		background: $bg-primary;
		border-radius: $border-radius;
		box-shadow: $shadow-light;
	}

	.skeleton-cover {
		width: 80px;
		height: 112px;
		border-radius: 8px;
		background: var(--skeleton-bg);
		overflow: hidden;
		position: relative;
		animation: skeleton-loading 1.5s infinite;
	}

	.skeleton-content {
		margin-left: $spacing-lg;
		flex: 1;
		width: 100%;
	}

	.skeleton-title {
		width: 70%;
		height: 22px;
		border-radius: 4px;
		background: $skeleton-bg;
		margin-bottom: $spacing-sm;
		animation: skeleton-loading 1.5s infinite 0.2s;
	}

	.skeleton-meta {
		width: 50%;
		height: 18px;
		border-radius: 4px;
		background: $skeleton-bg;
		margin-bottom: $spacing-sm;
		opacity: 0.7;
		animation: skeleton-loading 1.5s infinite 0.3s;
	}

	.skeleton-category {
		width: 60px;
		height: 20px;
		border-radius: 10px;
		background: $skeleton-bg;
		margin-bottom: $spacing-md;
		opacity: 0.6;
		animation: skeleton-loading 1.5s infinite 0.4s;
	}

	.skeleton-desc {
		height: 48px;
		border-radius: 4px;
		background: $skeleton-bg;
		opacity: 0.5;
		animation: skeleton-loading 1.5s infinite 0.5s;
	}

	@keyframes skeleton-loading {

		0%,
		100% {
			background-position: -200% 0;
		}

		50% {
			background-position: 200% 0;
		}
	}

	.skeleton-cover::after,
	.skeleton-title::after,
	.skeleton-meta::after,
	.skeleton-category::after,
	.skeleton-desc::after {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 50%;
		height: 100%;
		background: linear-gradient(90deg, transparent, $skeleton-shine, transparent);
		animation: shine 1.5s infinite;
	}

	.skeleton-cover::after {
		height: 112px;
	}

	@keyframes shine {
		100% {
			left: 150%;
		}
	}

	// 骨架屏样式 - 增强视觉效果
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// 添加动画
		animation: empty-fadeIn 0.8s ease-out;
		// 添加背景效果
		backdrop-filter: blur(10px);
		height:calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - var(--status-bar-height) - 0px - 50px);
	}

	@keyframes empty-fadeIn {
		0% {
			opacity: 0;
			transform: translateY(20px) scale(0.9);
		}

		100% {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.empty-icon {
		font-size: 64px;
		margin-bottom: $spacing-lg;
		opacity: 0.5;
		// 添加悬浮动画
		animation: float 3s ease-in-out infinite;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10px);
		}
	}

	.empty-text {
		font-size: 16px;
		color: $text-secondary;
		margin-bottom: 8px;
		font-weight: 500;
	}

	.empty-subtext {
		font-size: 14px;
		color: $text-tertiary;
	}

	// 优化的书籍列表项样式
	.book-item {
		display: flex;
		align-items: flex-start;
		margin: $spacing-md $spacing-lg;
		padding: $spacing-lg;
		background: $bg-primary;
		border-radius: $border-radius;
		box-shadow: $shadow-light;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		// 增强深度感
		transform: translateY(0);
		z-index: 1;

		// 简化装饰元素
		&::before {
			content: '';
			position: absolute;
			bottom: -30px;
			right: -30px;
			width: 100px;
			height: 100px;
			background: linear-gradient(135deg, rgba(0, 122, 255, 0.05), transparent);
			border-radius: 50%;
		}
	}

	.book-item:hover {
		transform: translateY(-2px);
		box-shadow: $shadow-medium;

		&::after {
			opacity: 1;
		}
	}

	// 添加动画效果
	.book-item-animated {
		animation: slideInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	}

	@keyframes slideInUp {
		from {
			transform: translateY(20px);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	// 为不同的列表项添加延迟动画
	.book-item[data-index="0"] {
		animation-delay: 0.1s;
	}

	.book-item[data-index="1"] {
		animation-delay: 0.2s;
	}

	.book-item[data-index="2"] {
		animation-delay: 0.3s;
	}

	.book-item[data-index="3"] {
		animation-delay: 0.4s;
	}

	.book-item[data-index="4"] {
		animation-delay: 0.5s;
	}

	.book-item[data-index="5"] {
		animation-delay: 0.6s;
	}

	.book-item[data-index="6"] {
		animation-delay: 0.7s;
	}

	.book-item[data-index="7"] {
		animation-delay: 0.8s;
	}

	.book-item[data-index="8"] {
		animation-delay: 0.9s;
	}

	.book-item[data-index="9"] {
		animation-delay: 1s;
	}

	// 点击效果
	.book-item:active {
		transform: scale(0.98);
		box-shadow: $shadow-medium;
		background: linear-gradient(135deg, $bg-primary, #f0f2f5);
	}

	// 书籍封面
	.book-cover-wrapper {
		position: relative;
		width: 80px;
		height: 112px;
		flex-shrink: 0;
	}

	// 书籍封面 - 优化3D效果
	.book-cover {
		width: 100%;
		height: 100%;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		// 添加3D效果
		transform-style: preserve-3d;
		transform: rotateY(5deg) translateZ(5px);
		transition: all 0.3s ease;

		// 添加书脊效果
		&::after {
			content: '';
			position: absolute;
			top: 0;
			right: -8px;
			width: 8px;
			height: 100%;
			background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
			transform: rotateY(90deg);
			transform-origin: left center;
		}

		// 添加悬浮动画效果
		animation: cover-float 6s ease-in-out infinite;
	}

	@keyframes cover-float {

		0%,
		100% {
			transform: translateY(0) rotateX(0deg) rotateY(5deg) translateZ(5px);
		}

		25% {
			transform: translateY(-2px) rotateX(1deg) rotateY(-1deg) translateZ(5px);
		}

		50% {
			transform: translateY(0) rotateX(0deg) rotateY(5deg) translateZ(5px);
		}

		75% {
			transform: translateY(-2px) rotateX(-1deg) rotateY(1deg) translateZ(5px);
		}
	}

	.book-item:hover .book-cover {
		transform: translateY(-4px) rotateX(2deg) rotateY(0deg) translateZ(8px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	}

	.book-item:active .book-cover {
		transform: rotateY(15deg) rotateX(5deg) translateZ(10px) scale(1.05);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
		animation: pulse 0.5s ease-in-out;
	}

	@keyframes pulse {

		0%,
		100% {
			transform: rotateY(15deg) rotateX(5deg) translateZ(10px) scale(1.05);
		}

		50% {
			transform: rotateY(18deg) rotateX(7deg) translateZ(12px) scale(1.08);
		}
	}

	// 阅读进度指示器
	.progress-indicator {
		position: absolute;
		bottom: 8px;
		left: 8px;
		right: 8px;
		height: 3px;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 3px;
		overflow: hidden;
		display: flex;
		align-items: center;
	}


	// 阅读进度条 - 增强视觉效果
	.progress-bar {
		width: 100%;
		height: 100%;
		// 添加进度条背景纹理
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 50%, transparent 50%);
		background-size: 8px 8px;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.progress-fill {
		height: 100%;
		background: linear-gradient(90deg, $primary-color, $secondary-color);
		border-radius: 3px;
		// 添加进度条动画
		animation: progressGrow 0s ease-out;
	}

	@keyframes progressGrow {
		from {
			width: 0;
		}

		to {
			width: inherit;
		}
	}

	// 书籍信息 - 再次优化布局和协调性
	.book-info {
		flex: 1;
		margin-left: $spacing-lg;
		display: flex;
		flex-direction: column;
		// 为内容提供足够空间，避免拥挤
		min-height: 112px;
		justify-content: space-between;
		// 添加卡片内边距感
		padding: 2px;
	}

	// 分类标签 - 与标题分行显示
	.book-category {
		font-size: 12px;
		color: $text-tertiary;
		background: $bg-secondary;
		border-radius: 12px;
		white-space: nowrap;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 3px;
		padding-bottom: 3px;
		// 添加细微的边框
		border: 1px solid rgba(0, 0, 0, 0.03);
		// 添加动画
		transition: all 0.3s ease;
		margin-left: 20px;
	}

	// 调整标题样式
	.book-title {
		font-size: 17px;
		font-weight: bold;
		color: $text-primary;
		margin: 0 0 $spacing-xs 0;
		// 防止标题过长
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		// 添加标题效果
		position: relative;
		z-index: 1;
		// 优化标题排版
		letter-spacing: 0.5px;
	}

	.book-item:hover .book-category {
		background: rgba(0, 122, 255, 0.05);
		color: $primary-color;
	}

	// 元数据信息
	.book-meta {
		display: flex;
		align-items: center;
		margin-bottom: $spacing-sm;
		flex-wrap: wrap;
		display: flex;
		flex-direction: row;
		// justify-content: space-between;
	}

	.author {
		font-size: 13px;
		color: $text-secondary;
		// 添加微妙的悬浮效果
		transition: color 0.3s ease;
	}

	.book-item:hover .author {
		color: $primary-color;
	}

	.meta-divider {
		font-size: 12px;
		color: $text-tertiary;
		margin: 0 4px;
	}

	.read-time-info {
		font-size: 12px;
		color: $primary-color;
		font-weight: 500;
		// 添加数字动画效果
		display: inline-block;
	}

	/* 最近阅读时间 */
	.last-read-info {
		display: flex;
		align-items: center;
		margin-bottom: $spacing-xs;
		padding: 2px 0;
	}

	.clock-icon {
		margin-right: 4px;
	}

	.last-read-text {
		font-size: 11px;
		color: $text-tertiary;
	}

	// 简介 - 优化显示，避免拥挤
	.book-description {
		flex: 1;
		display: flex;
		align-items: center;
		min-height: 40px;
	}

	.description-text {
		font-size: 13px;
		color: $text-tertiary;
		line-height: 1.6;
		margin: 0;
		display: -webkit-box;
		// 限制显示两行，避免占用过多空间
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		// 优化文字排版
		letter-spacing: 0.3px;
		word-spacing: 1px;
	}

	// 阅读状态 - 优化样式
	.read-status {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: $spacing-sm;
		padding-top: $spacing-sm;
		// 美化分割线
		border-top: 1px solid rgba(0, 0, 0, 0.03);
	}


	.btn-arrow {
		transition: transform 0.3s ease;
	}

	.book-item:hover .continue-reading::after {
		width: 100%;
	}

	// 阅读箭头 - 增强动画效果
	.read-arrow {
		padding: $spacing-xs;
		background: transparent;
		border-radius: 50%;
		// 添加旋转动画
		transition: all 0.3s ease;
		// 移除动画，避免视觉干扰
		touch-action: manipulation;
	}


	.book-item:hover .read-arrow {
		transform: translateX(3px);
	}

	.continue-reading-btn:hover .read-arrow {
		background: rgba(255, 255, 255, 0.2);
	}

	.continue-reading-btn:hover .read-arrow u-icon {
		color: white !important;
	}

	// 滚动条样式
	.content-area::-webkit-scrollbar {
		display: none;
	}

	.content-area {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
</style>